<template>
  <div class="app-container">
    <div>
      <img :src="url" class="image img1" />
      <div v-for="(item, i) in imgArr" :key="i">
        <!-- <img :src="item" class="image img2" /> -->
        <vue-li :src="(item)" class="image img2" />
      </div>
    </div>
    <div>
      <el-row>
        <el-col :span="3" :xs="6" :sm="6" :md="3" :lg="3" :xl="3">
          <el-card :body-style="{ padding: '0px' }" class="card"
            style="position: relative;z-index: 1;top:.2rem;left:.2rem">
            <div style="padding: .1rem;">
              <span style="display:block;line-height:.2rem">进厂水锰离子: <span class="font">{{ findVal(26).value | tofix(3)
              }}</span>
                <span class="button">
                  mg/L
                </span>
              </span>
              <span style="display:block;line-height:.2rem">进厂水PH: <span class="font">{{ findVal(2).value | tofix(3)
              }}</span>
                <span class="button">

                </span>
              </span>
              <span style="display:block;line-height:.2rem">进厂水氨氮: <span class="font">{{ findVal(3).value | tofix(3)
              }}</span>
                <span class="button">
                  mg/L
                </span>
              </span>
              <span style="display:block;line-height:.2rem">进厂水COD: <span class="font">{{ findVal(4).value | tofix(3)
              }}</span>
                <span class="button">
                  mg/L
                </span>
              </span>
              <span style="display:block;line-height:.2rem">进厂水浊度: <span class="font">{{ findVal(5).value | tofix(3)
              }}</span>
                <span class="button">
                  NTU
                </span>
              </span>
            </div>
          </el-card>
        </el-col>
        <el-col :offset="19" :span="3" :xs="6" :sm="6" :md="5" :lg="5" :xl="5">
          <el-card :body-style="{ padding: '0px' }" class="card"
            style="position: relative;z-index: 1;top:-1rem;left:-.2rem">
            <div style="padding: .1rem;" class="clearfix">
              <span style="display:block;line-height:.2rem">旧西水东调DN1200原水流量： <span class="font">{{ findVal(105).value |
                tofix(1) }}</span>
                <span class="button">
                  m³/h
                </span>
              </span>
              <span style="display:block;line-height:.2rem">四林DN1400原水流量： <span class="font">{{ findVal(104).value |
                tofix(1) }}</span>
                <span class="button">
                  m³/h
                </span>
              </span>
              <span style="display:block;line-height:.2rem">新西水东调DN1600原水流量： <span class="font">{{ findVal(103).value |
                tofix(1) }}</span>
                <span class="button">
                  m³/h
                </span>
              </span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import "@/assets/resources/comon0.css";
import { findByPage } from "@/api/dispatch/runningState";
import { binary } from "@/utils/common";

// 设置rem
const setHtmlFontSize = () => {
  const htmlDom = document.getElementsByTagName("html")[0];
  let htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth;
  htmlDom.style.fontSize = `${htmlWidth / 20}px`;
};

export default {
  name: "Catchment",
  components: {},
  data() {
    return {
      timer: null,
      setHtmlFontSize: setHtmlFontSize,
      url: require("@/assets/img/翔安图片/汇水井/汇水井.png"),
      data: [],
      imgArr: [],
      tableData1: [
        {
          pump: "#1",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#2",
          status: "停止",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#3",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#4",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#5",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
      ],
      tableData2: [
        {
          pump: "#1",
          outPut: "3332",
          power: "1.22",
          current: "1.2",
          sumPower: "120",
        },
        {
          pump: "#2",
          outPut: "3332",
          power: "1.22",
          current: "1.2",
          sumPower: "120",
        },
        {
          pump: "#3",
          outPut: "3332",
          power: "1.22",
          current: "1.2",
          sumPower: "120",
        },
        {
          pump: "#4",
          outPut: "3332",
          power: "1.22",
          current: "1.2",
          sumPower: "120",
        },
        {
          pump: "#5",
          outPut: "3332",
          power: "1.22",
          current: "1.2",
          sumPower: "120",
        },
      ],
    };
  },
  created() {
    window.onresize = this.setHtmlFontSize;
    this.setHtmlFontSize(); // 设置rem
    // this.$nextTick(() => {
    //   this.getData()
    // })
  },
  mounted() {
    this.getData();
    this.timer = setInterval(this.getData, 1000 * 30);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    document.getElementsByTagName("html")[0].style.fontSize = ""; // 重置rem
  },
  methods: {
    getData() {
      findByPage(1).then((response) => {
        this.data = response.data;
        const imgArr = [];
        response.data.forEach((dev) => {
          let num = binary(dev.info, 32);
          const info = num.split("").reverse();
          // 电机
          switch (true) {
            case dev?.type === 2 && dev?.display === true:
              if (info[1] === "1" && info[15] !== "1") {
                const img = require(`@/assets/img/翔安图片/汇水井/${dev.id}-1.png`);
                imgArr.push(img);
              } else if (info[15] === "1") {
                const img = require(`@/assets/img/翔安图片/汇水井/${dev.id}-15.png`);
                imgArr.push(img);
              }
            case dev?.type === 3 && dev?.display === true:
              if (info[1] === "1" && info[15] !== "1") {
                const img = require(`@/assets/img/翔安图片/汇水井/${dev.id}-1.png`);
                imgArr.push(img);
              } else if (info[2] === "1" && info[15] !== "1") {
                const img = require(`@/assets/img/翔安图片/汇水井/${dev.id}-2.png`);
                imgArr.push(img);
              } else if (info[15] === "1") {
                const img = require(`@/assets/img/翔安图片/汇水井/${dev.id}-15.png`);
                imgArr.push(img);
              }
          }
        });
        this.imgArr = imgArr;
        this.handleTable1();
        console.log(imgArr);
      });
    },
    handleTable1(data) {
      this.tableData1[0].pump = this.findVal(80).remark;
      this.tableData1[1].pump = this.findVal(81).remark;
      this.tableData1[2].pump = this.findVal(82).remark;
      this.tableData1[3].pump = this.findVal(83).remark;
      this.tableData1[4].pump = this.findVal(84).remark;
      this.tableData1[4].pump = this.findVal(85).remark;
      this.tableData1[0].time = this.findVal(80).rt + "";
      this.tableData1[1].time = this.findVal(81).rt + "";
      this.tableData1[2].time = this.findVal(82).rt + "";
      this.tableData1[3].time = this.findVal(83).rt + "";
      this.tableData1[4].time = this.findVal(84).rt + "";
      this.tableData1[4].time = this.findVal(85).rt + "";
      this.tableData1[0].status = this.handleStatus(81);
      this.tableData1[1].status = this.handleStatus(82);
      this.tableData1[2].status = this.handleStatus(83);
      this.tableData1[3].status = this.handleStatus(84);
      this.tableData1[4].status = this.handleStatus(85);
      this.tableData1[4].status = this.handleStatus(86);
    },
    handleStatus(id) {
      let num = binary(this.findVal(id).info, 32);
      const info = num.split("").reverse();
      if (info[1] === "1" && info[15] !== "1") {
        return "运行";
      } else if (info[15] === "1") {
        return "故障";
      } else return "停止";
    },
    findVal(id) {
      const arr = this.data.filter((item) => item?.id == id);
      if (arr.length === 0) {
        return [
          {
            id: 0,
            info: 0,
            leiji: 0,
            ord: 0,
            page: 0,
            remark: "",
            rt: 0,
            rtm: 0,
            spm: 0,
            type: 0,
            value: 0,
          },
        ];
      }
      return arr[0];
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  font-size: 0.15rem;
}

.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0);
}

.table_td {
  width: 130px;
  height: 30px;
  background-color: #1890ff;
  color: #fff;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.table_td2 {
  width: 100px;
  height: 30px;
  text-align: right;
  display: table-cell;
  vertical-align: middle;
  padding-right: 10px;
}

.table_td3 {
  width: 20px;
  height: 30px;
  text-align: right;
  display: table-cell;
  vertical-align: middle;
  padding-right: 10px;
}

.box {
  height: 300px;
}

.row-bg {
  margin-bottom: 10px;
}

.col_border {
  text-align: center;
  position: relative;
  z-index: 100;
}

.col_border:before {
  border: 1px solid rgba(25, 186, 139, 0.17);
  position: absolute;
  content: "";
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  right: 0;
  top: 25%;
}

.col {
  text-align: center;
  position: relative;
  z-index: 100;
}

.tip {
  text-align: center;
  color: gray;
  font-size: 16px;
  margin-bottom: 10px;
}

.content {
  text-align: center;
  font-size: 12px;
}

.img1 {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.img2 {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.card {
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  box-shadow: 0 0 .03rem #000;
}

.font {
  font-family: electronicFont;
  font-size: 0.2rem;
  color: #ffeb7b;
  font-weight: bold
}
</style>
